﻿import QtQuick 2.12

Item {
    id: root
    property string title: ""
    property int editWidth: 180 *dp
    property int textWidth: title==="" ? 0 : 80*dp

    property bool required: false       // 前面有没有那个红色的小星号
    property bool redBorder: false      // 红框密码

    property bool editable: true
    property string defaultText: ""
    property string prompt: ""
    property bool promptVisible: defaultText === "" ? (textinput.focus ? false : true) : false
    property var inputEchoModel: TextInput.Normal

    property var inputMaxLength: 100
    property bool maxLengthTip: !lengthVisible     // 输入超过限制时是否显示提示
    property var lengthVisible: false    // 显示用户当前输入的长度和最大输入长度

    property bool intflag: false
    property bool digit: false       // >0
    property bool douflag: false
    property bool ipflag: false




    function getText(){
        return textinput.text
    }
    function setText(text){
        if(text === undefined){
            console.log(title, "setTextUndefined")
            return
        }
        textinput.text = text
    }
    onFocusChanged: {
        if(focus){
            textinput.forceActiveFocus()
        }
    }



    signal textChanged()
    signal editingFinished()
    signal enterPressed()

    onVisibleChanged: {
        if(!visible){
            textinput.focus = false
        }
    }

    width: textWidth + editWidth
    height: 40*dp

    Item{
        height: parent.height
        Text{
            text: title
            font.pixelSize: config.fontsize
            x: 0
            anchors.verticalCenter: parent.verticalCenter
        }
    }
    Rectangle{
        id: rectInput
        radius: 3*dp
        height: parent.height
        width: editWidth
        x: textWidth
        border.color: redBorder ? "red" : "#CCCCCC"
        Item{       // 输入框内容裁剪
            clip: true
            height: parent.height
            x: 10
            width: lengthVisible ? parent.width - text_length.contentWidth-24 : parent.width-15
            TextInput{
                id: textinput
                anchors.fill: parent
                font.pixelSize: config.fontsize
                verticalAlignment: TextInput.AlignVCenter
                text: defaultText
                echoMode: inputEchoModel
                maximumLength: inputMaxLength

                validator: RegExpValidator {
                    regExp: digit? /^[0-9]+/ : intflag? /^[-+]?\d+/ :douflag? /[0-9]*(\.[0-9]+)?/ :ipflag? /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/: /.*/
                }
                onTextChanged: {
                    if(text === ""){
                        promptVisible = true
                    }else{
                        promptVisible = false
                    }
                    root.textChanged()
                }
                onEditingFinished: {
                    root.editingFinished()
                }
                Keys.onPressed: {
                    if(Number(event.key) < 200){        // key事件在text变化事件之前判断
                        if(text.length >= maximumLength && maxLengthTip){
                            showToolTip("最多输入"+maximumLength+"个字符")
                        }
                    }if(Number(event.key) === 16777220){    // 回车
                        root.enterPressed()
                    }
                }
                onFocusChanged: {
                    if(focus){
                        root.z = 100        // 焦点时显示在上层
                    }else{
                        root.z = 0
                    }
                }
                selectByMouse: true //设置为可以被鼠标选中
            }
        }


    }
    Text{           // 默认文字
        text: prompt
        visible: promptVisible
        font.pixelSize: config.fontsize
        anchors.verticalCenter: root.verticalCenter
        x: textWidth + 10*dp
        color: "#AAAAAA"
    }
    Text{           // 当前输入长度显示
        id: text_length
        visible: lengthVisible
        text: textinput.text.length + "/" + inputMaxLength
        anchors.verticalCenter: root.verticalCenter
        anchors.rightMargin: 9
        anchors.right: root.right
        color: "#AAAAAA"
        font.pixelSize: config.fontsize
    }

    Item{           // 输入框前面的小红点
        height: parent.height
        width: 10*dp
        Text{
            text: "*"
            x: -10*dp
            color: "red"
            font.pixelSize: config.fontsize
            anchors.verticalCenter: parent.verticalCenter
        }
        visible: required
    }               // 不可编辑状态
    Rectangle{
        color: "#EEEEEE"
        opacity: 0.5
        visible:  ! editable
        anchors.fill: rectInput
        MouseArea{
            anchors.fill: parent
            onReleased: {

            }
        }
    }


    // 用户输入提示 ===========================================================
    property bool isToolTipShow: false
    function showToolTip(text){
        tooltipText.text = text
        isToolTipShow = true
        timerToolTip.restart()
    }
    Timer{
        id: timerToolTip
        interval: 800
        repeat: false
        triggeredOnStart: false
        onTriggered: {
            isToolTipShow = false
        }
    }
    Rectangle{
        id: tooltip
        height: 22*dp
        width: tooltipText.contentWidth + 14
        radius: 4
        y: 42*dp
        x: Math.min(Math.max(textWidth, textWidth+editWidth-width), textWidth+editWidth/2)
        color: "#222222"
        Text {
            id: tooltipText
            anchors.centerIn: parent
            text: "最多输入100个字符"
            font.pixelSize: config.fontsize - 2
            color: "white"
        }
        state: isToolTipShow ? "show" : "hide"
        states: [
            State{
                name: "show"
                PropertyChanges {
                    target: tooltip
                    opacity: 0.85
                }
            },State{
                name: "hide"
                PropertyChanges {
                    target: tooltip
                    opacity: 0
                }
            }
        ]
        transitions: [
            Transition {
                from: "show"
                to: "hide"
                NumberAnimation{
                    properties: "opacity"
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
            },Transition {
                from: "hide"
                to: "show"
                NumberAnimation{
                    properties: "opacity"
                    duration: 100
                    easing.type: Easing.InOutQuad
                }
            }
        ]
        opacity: 0.8
    }


}
